<template>
  <div class="deviceList  unified-bg">
     <p class="top-titile">（洗衣机共<span>{{ this.static.numX }}</span>台, 烘干机共<span>{{ this.static.numH}}</span>台）</p>
     <div class="main">
         <div class="top-box" id="tab">
           <ul class="tab bg-f ">
             <li v-on:click="tabChang(1)" :class="{bdShow:navSelected==1}">
                <div class="icon-box" :class="{bgActive:navSelected==1, bgC:navSelected!=1}">
                  <div class="icon-sub" :class="{bgActiveSub:navSelected==1, bg9:navSelected!=1}">
                    <i class="icon iconfont">&#xe633;</i>
                  </div>
                </div>
                <p  :class="{color4c:navSelected==1, color9:navSelected!=1}">
                  已投运
                </p>
             </li>
             <li v-on:click="tabChang(2)" :class="{bdShow:navSelected==2}">
               <div class="icon-box" :class="{bgActive:navSelected==2, bgC:navSelected!=2}">
                 <div class="icon-sub" :class="{bgActiveSub:navSelected==2, bg9:navSelected!=2}">
                   <i class="icon iconfont">&#xe62c;</i>
                 </div>
               </div>
               <p :class="{color4c:navSelected==2, color9:navSelected!=2}">
                 故障
               </p>
             </li>
             <li v-on:click="tabChang(3)" :class="{bdShow:navSelected==3}">
               <div class="icon-box" :class="{bgActive:navSelected==3, bgC:navSelected!=3}">
                 <div class="icon-sub" :class="{bgActiveSub:navSelected==3, bg9:navSelected!=3}">
                   <i class="icon iconfont" style="font-size:18px">&#xe63a;</i>
                 </div>
               </div>
               <p :class="{color4c:navSelected==3, color9:navSelected!=3}">
                 未投运
               </p>
             </li>
           </ul>
         </div>

       <!--故障开始-->
       <div v-show="navSelected==2" style="height: 100%">
         <fault  v-on:childDel="childMsg1" v-on:childSet="childMsg2" ref="fault" v-bind:countNum="countNum"></fault>
       </div>
       <!--故障结束-->

       <!--已投运开始-->
       <div v-show="navSelected==1" style="height: 100%">
         <operate  v-on:childDel="childMsg1" v-on:childSet="childMsg2" ref="operate" v-bind:countNum="countNum"></operate>
       </div>

       <!--已投运结束-->

       <!--未投运开始-->
       <div v-show="navSelected==3" style="height: 100%">
         <noneOperate  v-on:childDel="childMsg1" v-on:childSet="childMsg2" ref="noneOperate" v-bind:countNum="countNum"></noneOperate>
       </div>
       <!--未投运结束-->

     </div>

    <!--解绑设备对话框-->
     <div id="dialogDelete" v-show="dialogShow">
      <div class="weui-mask"></div>
      <div class="weui-dialog">
        <div class="weui-dialog__hd"><strong class="weui-dialog__title">操作提醒</strong></div>
        <div class="weui-dialog__bd">
           <div class="icon-box">
             <i class="icon iconfont">&#xe619;</i>
           </div>
          <p class="jb color-6">
             一当解绑，刚设备就会从列表中消失，确认解绑？
           </p>
        </div>
        <div class="weui-dialog__ft">
          <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default" style="color: #999" @click="dialogBox('confim')">确认</a>
          <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary color-b-41" style="color: #42aaff" @click="dialogBox()">取消</a>
        </div>
      </div>
    </div>

    <!--设置状态-->
    <QPup title="请选择设备状态" class="withdraw-type" v-model="dialogStatusCood">
      <div class="box">
        <div  @click="toggleType('wx')" :class="{'withdraw': withdraw === 'wx'}" class="item wx">
          <i class="iconfont icon">&#xe603;</i>
          <strong>已投运</strong>
          <a v-show="wx1"> &nbsp;( 当前 )</a>
        </div>
        <div  @click="toggleType('zyb')" :class="{'withdraw': withdraw === 'zyb'}" class="item zfb">
          <i class="iconfont icon">&#xe603;</i>
          <strong>故障</strong>
          <a v-show="zyb1"> &nbsp;( 当前 )</a>
        </div>
        <div  @click="toggleType('yhk')" :class="{'withdraw': withdraw === 'yhk'}" class="item yhk">
          <i class="iconfont icon">&#xe603;</i>
          <strong>未投运</strong>
          <a v-show="yhk1"> &nbsp;( 当前 )</a>
        </div>
      </div>
      <a class="btn" @click="toStatus" href="javascript:;">确认 </a>
    </QPup>
  </div>
</template>
<script>
  import * as api from 'api';
  import QPup from '@/components/q_pup.vue';
  export default {
    data () {
      return {
        // 设备总数
        countNum: [],
        static: {
          numX: 0,
          numH: 0
        },
        wx1: false,
        zyb1: false,
        yhk1: false,
        deviceId: '',
        withdraw: '',
        deviceStatus: 1,
        dialogStatusCood: false,
        modelType: '',
        device: '洗衣机',
        navSelected: 1,
        faultLloading: false,
        deviceType: 1,
        dialogShow: false
      }
    },
    components: {
      QPup,
      fault: require('./fault.vue'),
      operate: require('./operate.vue'),
      noneOperate: require('./noneOperate.vue')
    },

    methods: {
      childMsg1 (data) {
        this.dialogShow = data[0]
        this.deviceId = data[1]
      },
      childMsg2 (data) {
        this.dialogStatusCood = !this.dialogStatusCood
        this.deviceId = data[1]
        this.deviceStatus = data[2]
        if (this.deviceStatus === '1') {
          this.wx1 = true
          this.zyb1 = false
          this.yhk1 = false
          this.withdraw = 'wx'
        }
        if (this.deviceStatus === '2') {
          this.wx1 = false
          this.zyb1 = true
          this.yhk1 = false
          this.withdraw = 'zyb'
        }
        if (this.deviceStatus === '3') {
          this.wx1 = false
          this.zyb1 = false
          this.yhk1 = true
          this.withdraw = 'yhk'
        }
      },

      // 顶部导航 切换
      tabChang (index) {
        this.navSelected = index;
        if (this.navSelected === 1) {
          this.$refs.operate.init()
        }
        if (this.navSelected === 2) {
          this.$refs.fault.init()
          this.$refs.fault.queryStatic()
        }
        if (this.navSelected === 3) {
          this.$refs.noneOperate.init()
          this.$refs.noneOperate.queryStatic()
        }
      },

      // 解绑设备，弹窗确认或取消；
      dialogBox (obj) {
        this.dialogShow = false
        if (obj === 'confim') {
          api.deceteDevice({ agencyId: this.$store.state.userInfo.id, deviceSN: this.deviceId })
            .then(res => {
              if (this.navSelected === 1) {
                this.$refs.operate.init(false)
              }
              if (this.navSelected === 2) {
                this.$refs.fault.init()
              }
              if (this.navSelected === 3) {
                this.$refs.noneOperate.init()
              }
              weui.toast(res.resultDetail)
            })
        }
      },
      // 设置设备状态---
      toggleType (type) {
        this.withdraw = type;
      },
      toStatus () {
        this.dialogStatusCood = false
        if (this.withdraw === 'wx') {
          this.deviceStatus = 1
        } else if (this.withdraw === 'zyb') {
          this.deviceStatus = 2
        } else if (this.withdraw === 'yhk') {
          this.deviceStatus = 3
        }
        api.updateStatus({
          agencyId: this.$store.state.userInfo.id,
          deviceSN: this.deviceId,
          deviceStatus: this.deviceStatus - 0
        })
          .then(res => {
            if (this.navSelected === 1) {
              this.$refs.operate.init()
              this.$refs.operate.queryStatic()
              this.$refs.fault.queryStatic()
              this.$refs.noneOperate.queryStatic()
            }
            if (this.navSelected === 2) {
              this.$refs.fault.init()
              this.$refs.operate.queryStatic()
              this.$refs.fault.queryStatic()
              this.$refs.noneOperate.queryStatic()
            }
            if (this.navSelected === 3) {
              this.$refs.noneOperate.init()
              this.$refs.operate.queryStatic()
              this.$refs.fault.queryStatic()
              this.$refs.noneOperate.queryStatic()
            }
            weui.toast('设置状态成功')
          })
      },

//      统计总数
      queryCount () {
        api.queryDeviceCount({
          agencyId: this.$store.state.userInfo.id
        })
          .then(res => {
            res.resultData.forEach((item, index) => {
              if (item.deviceType === '1') {
                this.static.numX = +item.deviceCount
              } else if (item.deviceType === '2') {
                this.static.numH = +item.deviceCount
              }
            })
            this.countNum = [this.static.numX, this.static.numH]
          })
      }
    },

    created () {
      this.queryCount()
    },
    mounted () {
      this.title('设备');
    }
  }

</script>
<style lang="scss">
  @import '../../../styles/agent/device/index';
  .weui-btn:after {
    @include wh(0, 0)
  }
  .withdraw-type {
    .box {
      font-size: px2rem(42);
      color: #4c4c4c;
      background-color: #f7f9fa;
      padding: px2rem(20);
      div.item {
        margin-bottom: px2rem(12);
        background-color: #fff;
        @include hl(px2rem(120));
        padding-left: px2rem(44);
        box-shadow: 1px 1px 1px #f2f6f7, -1px -1px 1px #f2f6f7;
        strong {
          padding-left: px2rem(60);
        }
        i {
          color: #d7d7d7;
        }
        &.withdraw {
          i {
            color: #319cff;
          }
        }
        a {
          font-size: px2rem(32);
          color: #999;
        }
        &.wx {
          position: relative;
          span {
            display: inline-block;
            width: px2rem(188);
            height: px2rem(65);
            @include bis('../../../imgs/wx@2x.png');
            @include ct();
            margin-left: px2rem(30);
          }
        }
        &.zfb {
          position: relative;
          span {
            display: inline-block;
            width: px2rem(186);
            height: px2rem(63);
            @include bis('../../../imgs/zfb@2x.png');
            @include ct();
            margin-left: px2rem(30);
          }
        }
        &.yhk {
          position: relative;
          span {
            display: inline-block;
            width: px2rem(203);
            height: px2rem(46);
            @include bis('../../../imgs/yhk@2x.png');
            @include ct();
            margin-left: px2rem(30);
          }
        }
      }
    }
    a.btn {
      display: inline-block;
      width: 100%;
      text-align: center;
      @include hl(px2rem(100));
      @include sc(px2rem(32), #FFF);
      background-color: #2f99fc;
    }
  }
</style>
